<!-- 业务主体组件 -->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="">
      <titleLine
        title="查询条件(点击可展开更多或收起)"
        :showV="true"
        :visible="formVisible"
        @changeVisible="changeVisible"
      ></titleLine>
      <a-form v-if="formVisible">
        <a-row :gutter="queryGutter">
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="接口名称"
                allowClear
                v-model="queryParam.authorityName"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="接口编码"
                allowClear
                v-model="queryParam.authorityCode"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="接口地址"
                allowClear
                v-model="queryParam.uri"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <aSelectTorF
                allowClear
                v-model="queryParam.useStatus"
                placeholder="状态正常"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <div class="search-button">
            <a-button
              type="primary"
              icon="search"
              class="ml10"
              @click="getDataList(true)"
            >
              查询
            </a-button>
            <a-button class="ml10" type="primary" @click="reset">重置</a-button>
          </div>
        </a-row>
      </a-form>
    </div>
    <!-- 表格区域 -->
    <div class="">
      <titleLine title="查询结果" :isBgColor="false">
        <aButtonPermission
          icon="plus"
          slot="button"
          @buttonEvent="add"
          labelName="添加"
          buttonCode="client_authority_add"
        >
        </aButtonPermission>
      </titleLine>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        class="mt10"
        rowKey="id"
        :pagination="false"
        :scroll="{ x: 500, y: 800 }"
        :loading="tableLoading"
        :indentSize="30"
        @expand="expand"
        :expandedRowKeys.sync="expandedRowKeys"
      >
        <span slot="useStatus" slot-scope="text, record">
          <a-tag color="blue" v-if="record.useStatus === 0">启用</a-tag>
          <a-tag v-if="record.useStatus === 1">禁用</a-tag>
        </span>
        <span slot="authorityType" slot-scope="text, record">
          <a-tag color="blue" v-if="record.authorityType === 0">目录</a-tag>
          <a-tag color="green" v-if="record.authorityType === 1">接口</a-tag>
        </span>
        <template slot="roles" slot-scope="text, record">
          <a-select
            v-model="record.roles"
            mode="multiple"
            style="width: 100%"
            placeholder="全角色放行"
            disabled
          >
            <a-select-option v-for="value in roleData" :key="value.id">
              {{ value.roleName }}
            </a-select-option>
          </a-select>
        </template>
        <span slot="action" slot-scope="record">
          <aLinkPermission
            labelName="编辑"
            buttonCode="client_authority_update"
            @buttonEvent="edit(record)"
          >
          </aLinkPermission>
          <a-dropdown class="ml10">
            <a class="ant-dropdown-link"
              >更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="record.authorityType === 0">
                <aLinkPermission
                  labelName="添加数据"
                  buttonCode="client_authority_add"
                  @buttonEvent="add(record)"
                >
                </aLinkPermission>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确认删除吗？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="del(record)"
                >
                  <aLinkPermission
                    labelName="删除"
                    buttonCode="client_authority_delete"
                  >
                  </aLinkPermission>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
      <pagination
        class="pagination"
        :pagination="ipagination"
        @paginationChange="paginationChange"
        @paginationShowSizeChange="paginationShowSizeChange"
      ></pagination>
    </div>
    <!-- 数据操作组件 -->
    <Modal @handleOk="handleOk" ref="Model"></Modal>
  </a-card>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Mixins } from "@/mixins/list";
import { columns } from "./component/save";
import Modal from "./component/Model";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {
    Modal,
  },
  mixins: [Mixins],
  data() {
    //这里存放数据
    return {
      api: {
        dataList: "/admin_server/uc/auth/authority/page", // 分页
        delete: "/admin_server/uc/auth/authority/delete", // 删除
        roleList: "/admin_server/uc/auth/role/list",
        listAuthorityById: "/admin_server/uc/auth/authority/listAuthorityById",
      },
      columns, // 列表列
      roleData: [],
      expandedRowKeys: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 展开
     * @param {*} expanded
     * @param {*} record
     */
    expand(expanded, record) {
      if (expanded) {
        this.tableLoading = true;
        this.$request
          .getRequest1(this.api.listAuthorityById, { pid: record.id })
          .then((res) => {
            if (res.success) {
              this.filterDataSource(this.dataSource, record.id, res.result);
            }
            this.tableLoading = false;
          });
      }
    },
    /**
     * 递归设置展开列
     * @param {*} dataSource
     * @param {*} pid
     * @param {*} result
     */
    filterDataSource(dataSource, pid, result) {
      dataSource.forEach((x) => {
        if (x.children) {
          this.filterDataSource(x.children, pid, result);
        }
        if (x.id === pid) {
          x.children = result;
          x.children.forEach((y) => {
            // 如果是目录，设置可展开
            if (y.authorityType === 0) {
              y.children = [];
            }
          });
        }
      });
    },
    async getRoleList() {
      this.$request.getRequest1(this.api.roleList).then((res) => {
        if (res.success) {
          this.roleData = res.result;
        }
      });
    },
    changeVisible(visible) {
      this.formVisible = visible;
    },
    handleOk() {
      this.$refs.Model.close();
      this.getDataList();
    },
    del(record) {
      this.$request.get1(this.api.delete, { id: record.id }).then((res) => {
        if (res.success) {
          this.$message.success("删除成功");
          this.getDataList();
        }
      });
    },
    edit(record) {
      this.$refs.Model.init(record.id, "更新数据", this.roleData);
    },
    add(record) {
      this.$refs.Model.init(
        "",
        "添加数据",
        this.roleData,
        record ? record.id : ""
      );
    },
    getDataList(isResetPage) {
      this.tableLoading = true;
      this.getRoleList();
      const params = this.getQueryParams(isResetPage); // 查询条件
      this.$request.get1(this.api.dataList, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.dataSource.forEach((x) => {
            if (x.authorityType == 0) {
              x.children = [];
            }
          });
          this.ipagination.total = res.result.total;
        }
        this.tableLoading = false;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 0 !important;
}
</style>